import { Component } from '@angular/core';
import {
  RouterLink,
  RouterLinkActive,
  RouterOutlet,
} from '@angular/router';

@Component({
  selector: 'app-element-injector',
  standalone: true,
  imports: [RouterOutlet, RouterLink, RouterLinkActive],
  template: `
    <div class="mx-6 my-4 tabs tabs-bordered">
      <a
        role="tab"
        class="tab"
        [routerLink]="['./']"
        [routerLinkActiveOptions]="{ exact: true }"
        [routerLinkActive]="'tab-active'"
      >
        Normal
      </a>
      <a
        role="tab"
        class="tab"
        [routerLink]="['render']"
        [routerLinkActive]="'tab-active'"
      >
        Render
      </a>
      <a
        role="tab"
        class="tab"
        [routerLink]="['lview']"
        [routerLinkActive]="'tab-active'"
      >
        <code>LView</code>
      </a>
      <a
        role="tab"
        class="tab"
        [routerLink]="['lview-no-vp']"
        [routerLinkActive]="'tab-active'"
      >
        <pre>
<code>LView</code>
<span>(A w/o <code>viewProvider</code>)</span>
        </pre>
      </a>
    </div>

    <section class="flex justify-around">
      <span> <router-outlet /> </span>
    </section>
  `,
  styles: `
    section {
      width: 37rem;
    }
    .tab.tab-active:not(.tab-disabled):not([disabled]), .tab:is(input:checked) {
      @apply border-b-indigo-600;
    }
    pre {
      font-family: 'Roboto Slab';
    }
  `,
})
export class ElementInjectorComponent {}
